<template>
  <div ref="containerRef" class="detail">
    <div class="detail_header">
      <a-affix :target="(containerRef as HTMLElement)">
        <a-page-header title="待办事项" subtitle="查看" @back="onBack">
        </a-page-header>
      </a-affix>
    </div>
    <div class="detail_content">
      <h1 class="title">{{ form?.title }}</h1>
      <div class="info">
        <a-space>
          <span>
            <icon-user class="icon"/>
            <span v-if="form?.type === 3" class="label">申请人：</span>
            <span v-else class="label">发布人：</span>
            <span>{{ form?.createUserString }}</span>
          </span>
          <a-divider direction="vertical"/>
          <span>
            <icon-history class="icon"/>
            <span class="label">发布时间：</span>
            <span>{{ form?.createTime }}</span>
          </span>
          <a-divider v-if="form?.updateTime" direction="vertical"/>
          <span v-if="form?.updateTime">
            <icon-schedule class="icon"/>
            <span>更新时间：</span>
            <span>{{ form?.updateTime }}</span>
          </span>
          <a-divider direction="vertical"/>
          <span>
            <icon-schedule class="icon"/>
            <span>待办状态：</span>
            <!--  设置颜色  1：待处理；2：进行中；3：已完成；4：已取消；5：已拒绝；6：已同意-->
            <span v-if="form?.status === 1" class="status status-todo">待处理</span>
            <span v-if="form?.status === 2" class="status status-doing">进行中</span>
            <span v-if="form?.status === 3" class="status status-done">已完成</span>
            <span v-if="form?.status === 4" class="status status-default">已取消</span>
            <span v-if="form?.status === 5" class="status status-error">已拒绝</span>
            <span v-if="form?.status === 6" class="status status-done">已同意</span>
          </span>
        </a-space>
      </div>
      <div style="flex: 1;">
        <AiEditor v-model="form.content"/>
        <!--      按钮-->
        <!--      1.根据类型显示不同的按钮 - 按钮剧中显示-->
        <div class="detail_footer" v-if="form?.status === 1 || form?.status === 2">
          <a-space>
            <!--个人待办-->
            <a-button type="primary" v-if="form?.type === 1" @click="dealWith(id,3,form?.userIdCreator)">完成</a-button>
            <a-button type="default" v-if="form?.type === 1" @click="dealWith(id,4,form?.userIdCreator)">取消</a-button>
          </a-space>
          <a-space>
            <!--团队待办-->
            <a-button type="primary" v-if="form?.type === 2" @click="dealWith(id,3,form?.userIdCreator)">完成</a-button>
            <a-button type="default" v-if="form?.type === 2" @click="dealWith(id,4,form?.userIdCreator)">取消</a-button>
          </a-space>
          <a-space>
            <!--申请待办-->
            <a-button type="primary" v-if="form?.type === 3" @click="dealWith(id,6,form?.userIdCreator)">同意</a-button>
            <a-button type="default" v-if="form?.type === 3" @click="dealWith(id,5,form?.userIdCreator)">拒绝</a-button>
          </a-space>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import AiEditor from './components/index.vue'
import {dealUserTodo, getUserTodo} from '@/apis/system/user-message'
import {deleteMusicianBindByArtists, updateMusicianBindByArtists} from '@/apis/musician/musicianBind'
import {updateSettlementStatus, updateSettlementBelongTo} from '@/apis/settlement/report'
import {useTabsStore} from '@/stores'
import {useResetReactive} from '@/hooks'
import {Message, Modal} from "@arco-design/web-vue";
import {h} from 'vue'

defineOptions({name: 'UserNotice'})

const route = useRoute()
const router = useRouter()
const tabsStore = useTabsStore()

const {id} = route.query
const status = ref('')
const containerRef = ref<HTMLElement | null>()
const [form, resetForm] = useResetReactive({
  id: '',
  title: '',
  userIdCreator: '',
  createUserString: '',
  remindTime: '',
  content: '',
  status: '',
  type: '',
  businessType: ''
})

// 回退
const onBack = () => {
  router.back()
  tabsStore.closeCurrent(route.path)
}

// 打开
const onOpen = async (id: string) => {
  resetForm()
  const {data} = await getUserTodo(id)
  Object.assign(form, data)
}

// 处理
const dealWith = async (id: string, status: number, userId: number) => {
  // 处理待办
  if (status === 6 || status === 5) {
    if (form.type === 3 && form.businessType === 1) {
      await dealUserTodo(id, status)
      Message.success('处理成功')
      // 更新绑定状态
      // 获取form.content 中的【】里的内容，并以、分割
      const matches = form.content.match(/【([^】]+)】/g) || [];
      // 提取每个【】里的内容，并用、分割
      const artists = matches
          .map(item => item.slice(1, -1)) // 去掉【和】
          .flatMap(str => str.split('、')) // 按、分割
          .filter(Boolean); // 去除空字符串
      if (status === 6) {
        //更新艺人绑定状态
        await updateMusicianBindByArtists(artists)
        // 同步艺人数据到报表数据中 - 同意申请才进行同步 - 目前不需要同意绑定申请之后去同步  报表  里的艺人数据进行数据绑定
        // await updateSettlementBelongTo(artists, userId)
      } else if (status === 5) {
        //删除已经创建未绑定的艺人,防止影响后续的申请
        await deleteMusicianBindByArtists(artists)
      }
      onBack()
    }

    if (status === 6 && form.businessType === 2) {
      // 更新团队报表
      Modal.confirm({
        title: '提示',
        content: h('div', [
          `是否确定同意【${form.title}】`,
          h('div', {style: 'margin-top: 4px;'}, '即将同步结算数据为已结算'),
          h('div', {style: 'margin-top: 8px;'}, [
            h('small', {style: 'color: #999;'}, '同意后，结算数据已结算将无法修改，并确认提现已发放。')
          ])
        ]),
        hideCancel: false,
        okButtonProps: {status: 'danger'},
        onOk: async () => {
          console.log('onOk called')
          // 这里处理结算报表状态为已结算
          await dealUserTodo(id, status)
          //修改申请人未结算数据的状态
          await updateSettlementStatus(userId)
          onBack()
        },
      })
    } else if (status === 5) {
      // 这里处理结算报表状态为已结算
      await dealUserTodo(id, status)
      onBack()
    }
  } else {
    await dealUserTodo(id, status)
    Message.success('处理成功')
    onBack()
  }
}

onMounted(() => {
  onOpen(id as string)
})

</script>

<style scoped lang="scss">
.detail_content {
  .title {
    text-align: center;
  }

  .info {
    text-align: center;
  }

  .icon {
    margin-right: 3px;
  }
}

.status {
  font-weight: bold;
  margin-left: 4px;

  &-todo {
    color: #faad14; // 橙色
  }

  &-doing {
    color: #1890ff; // 蓝色
  }

  &-done {
    color: #52c41a; // 绿色
  }

  &-default {
    color: #737a87; // 灰色
  }

  &-error {
    color: #fa7fa9; // 红色
  }
}

.detail_footer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 24px; // 可根据需要调整
}
</style>
